<template>
  <div
    title="斜体"
    class="tlbr-btn"
    :class="{ active: italicType }"
    @click="changeItalic"
  >
    <div class="tlbr-btn__icon">
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M10.6 5.40002C10.2686 5.40002 10 5.66865 10 6.00002C10 6.3314 10.2686 6.60002 10.6 6.60002H12.7664L10.0664 17.4H7.6C7.26863 17.4 7 17.6687 7 18C7 18.3314 7.26863 18.6 7.6 18.6H11H13.4C13.7314 18.6 14 18.3314 14 18C14 17.6687 13.7314 17.4 13.4 17.4H11.3L14 6.60003L14 6.60002H16.4C16.7314 6.60002 17 6.3314 17 6.00002C17 5.66865 16.7314 5.40002 16.4 5.40002H10.6Z"
          fill="currentColor"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, inject, computed, shallowRef } from 'vue'
import Quill from 'quill'
const QuillEditor = inject('QuillEditor', shallowRef<Quill>())
const formatMap = inject('formatMap', ref<Record<string, any>>({}))
const getSelectionFormat = inject('getSelectionFormat', () => {})
const italicType = computed(() => {
  return formatMap.value.italic
})
const changeItalic = () => {
  QuillEditor.value!.focus()
  QuillEditor.value!.format('italic', !italicType.value)
  getSelectionFormat()
}
</script>
<style lang="scss" scoped></style>
